<script setup>
    import { inject } from 'vue'

    const props = defineProps({
        back: {
            type: String,
            default: ''
        },
        showBack: {
            type: Boolean,
            default: true
        }
    })

    // 点击关闭按钮
    const close = inject('close')
    const handleClickClose = (e='') => {
        close(e)
    }


</script>

<template>
    <div class="content-card">
        <div class="content-top flex-between">
            <div class="left-text flex-center">
                <div class="back flex-center">
                    <div v-if="showBack" class="pointer flex-center" @click="handleClickClose(props.back)">
                        <img src="../assets/images/back.png">
                        
                        <slot name="backText"></slot>
                    </div>

                    <slot name="currentTitle"></slot>

                </div>

                <slot name="filter"></slot>

            </div>
            <div class="right-operate flex-center">
                
                <slot name="tabbar"></slot>

                <img 
                    class="pointer" 
                    src="../assets/images/close.png"
                    @click="handleClickClose"
                >
            </div>

        </div>
        
        <slot></slot>

    </div>
</template>

<style lang="less" scoped>
    .content-card{
        width: 1542px;
        height: 852px;
        margin-left: 18px;
        background: #121165;
        box-shadow: inset 0px 3px 20px 0px rgba(98,137,248,0.5800);

        .content-top{
            height: 32px;
            margin: 29px 22px 29px 45px;

            .back{
                font-size: 22px;
                color: #fff;
                margin-right: 45px;

                ::v-deep(.text){
                    min-width: 90px;

                    &.active{
                        color: #17CAF0;
                    }
                }

                img{
                    margin-right: 8px;
                }


            }
        }
    }
</style>